import {
  addAtMeetingPeriod,
  delAtMeetingPeriod,
  getAtMeetingPeriodByPage,
  updateAtMeetingPeriod,
} from '@/services/meeting/atMouthlyMeeting';
import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Modal } from 'antd';
import type { FormLayout } from 'antd/es/form/Form';
import React, { useRef, useState } from 'react';
import styles from './atEngineer.less';
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

const AtEngineer: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [formVisit, setFormVisit] = useState(false); // 新建和编辑提示框
  const [formTitle, setFormTitle] = useState('重置密码'); // 标题
  const [createOrUpdate, setCreateOrUpdate] = useState(false); // 标题
  const [grid, setGrid] = useState(true);
  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [form] = Form.useForm();
  const ref = useRef(null);
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 50,
    },
    {
      title: '英文名',
      dataIndex: 'engineerName',

      sorter: true,
    },
    {
      title: '中文名',
      dataIndex: 'chineseName',
      sorter: true,
    },
    {
      title: '员工号',
      dataIndex: 'employeeNumber',
      sorter: true,
    },
    {
      title: 'Gid',
      dataIndex: 'gid',
      sorter: true,
    },
    {
      title: '工程师级别',
      dataIndex: 'engineerGrade',
      sorter: true,
    },
    {
      title: '权力',
      dataIndex: 'accessRights',
      sorter: true,
    },
    {
      title: '职责',
      dataIndex: 'jobFunction',
      sorter: true,
    },
    {
      title: 'BASE',
      dataIndex: 'baseLocation',
      sorter: true,
    },
    // {
    //   title: '开始时间',
    //   dataIndex: 'employeeNumber',
    //   search: false,
    // },
    // {
    //   title: '开始时间',
    //   dataIndex: 'startDate',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    // },

    // {
    //   title: '结束时间',
    //   dataIndex: 'endDate',

    //   search: false,
    // },
    // {
    //   title: '结束时间',
    //   dataIndex: 'endDate',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    // },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option3',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setFormVisit(true);
            setFormTitle('编辑会议时间区域');
            // setConfirmLoading3(true);
            // await updatePassword(form2.getFieldsValue());
            // setConfirmLoading3(false);
            // setFormVisit(false);
            // 这个爆红不用管(从新加载页面)
            actionRef.current.reload();
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delAtMeetingPeriod({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const handleSubmit2 = async (values) => {
    if (formTitle == '新建会议时间区域') {
      await addAtMeetingPeriod(values);
    } else {
      await updateAtMeetingPeriod(values);
    }

    setFormVisit(false);
    actionRef.current.reload();
  };

  return (
    <div className={styles.father}>
      <ProTable
        headerTitle="月度会议"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        key="1"
        revalidateOnFocus={false}
        defaultSize="small"
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button1"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建会议时间区域');
              form.resetFields();
              setFormVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
          <Button
            key="button2"
            icon={<PlusOutlined />}
            onClick={() => {
              // const filters = filterTranNew(ref.current.getFieldsValue());
              // exportDnInterfaceReal({
              //   current: 1,
              //   pageSize: 150000,
              //   filters: filters,
              // }).then((res) => {
              //   const aLink = document.createElement('a');
              //   document.body.appendChild(aLink);
              //   aLink.style.display = 'none';
              //   aLink.href = window.URL.createObjectURL(res);
              //   aLink.setAttribute(
              //     'download',
              //     `Dn接口数据_${moment().format('YYYYMMDDHHmm')}.xlsx`,
              //   );
              //   aLink.click();
              //   document.body.removeChild(aLink);
              // });
            }}
            type="primary"
          >
            导出
          </Button>,

          <Button
            key="button3"
            icon={<PlusOutlined />}
            onClick={() => {
              // setUploadTitle('导入文件');
              // setUploadVisit(true);
              // setFileList([]);
            }}
            type="primary"
          >
            导入文件
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          // const sorters = sortTran(sort);
          // console.log(sort, params, '----');
          // const filters = filterTranNew(params);
          const result = await getAtMeetingPeriodByPage({
            ...params,
            // sorters: sorters,
            // filters: filters,
          });
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        rowSelection={{}}
        pagination={{
          pageSize: 20,
          pageSizeOptions: [20, 100, 500, 1000],
        }}
      />

      <ModalForm
        visible={formVisit}
        title={formTitle}
        form={form}
        key="2"
        onFinish={handleSubmit2}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setFormVisit(false);
          },
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />

        <ProFormText
          name="meetingName"
          label="会议名称"
          rules={[{ required: true, message: 'Please input your orgName!' }]}
          disabled={createOrUpdate}
        />

        <ProFormDateTimePicker
          name="startDate"
          label="开始时间"
          rules={[{ required: true, message: 'Please input your orgName!' }]}
          disabled={createOrUpdate}
        />
        <ProFormDateTimePicker
          name="endDate"
          label="结束时间"
          rules={[{ required: true, message: 'Please input your orgName!' }]}
          disabled={createOrUpdate}
        />
      </ModalForm>
    </div>
  );
};

export default AtEngineer;
